<!doctype html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>我的相册_陈恢严个人博客</title>
  <meta name="keywords" content="博客,个人博客,陈,陈陈,陈陈陈,陈恢严,恢严,陈恢严个人博客,个人,个人相册,我的相册,相册" />
  <meta name="description" content="陈恢严个人博客，是一个主学JAVA后端语言、记录开发中遇到的技术难点、并专注于个人生活的博客。" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/asset/images/favicon.ico" type="image/x-icon">
  <link href="/asset/css/base.css" rel="stylesheet">
  <link href="/asset/layui/css/layui.css" rel="stylesheet">
  <script src="/asset/js/jquery.min.js" type="text/javascript"></script>
  <link href="/asset/css/loading.css" rel="stylesheet">
  <script type="text/javascript" src="/asset/js/comm.js"></script>
  <script type="text/javascript" src="/asset/layui/layui.js"></script>
  <script type="text/javascript" src="/asset/js/vue.min.js"></script>
  <!--[if lt IE 9]>
  <script src="/asset/js/modernizr.js"></script>
  <![endif]-->
  <script src="/asset/js/scrollReveal.js"></script>
  <style>
    nav ul li a[href='/myAlbum']{color: #f7ffb4; /*background: #176c86;*/
      background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -webkit-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -moz-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -ms-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -o-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -webkit-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -moz-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -ms-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -o-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
    }
  </style>
</head>
<body>
<div class="box-bg">
  <div class="stars"></div>  <!--背景层，不要删除，不然没有作用-->
</div>
  <div id="myAlbumVue">
    <header>
      <div class="profile">
        <div class="avatar fl"><img src="/asset/images/avatar.jpg"></div>
        <div class="guanzhu fl">
          <ul>
            <li><img src="/asset/images/nianling.png"><span>生日：1997-01-26</span></li>
            <li><img src="/asset/images/weizhi.png"><span>中国·广东·湛江</span></li>
            <li><img src="/asset/images/qq.png"><span>QQ：879532354</span></li>
            <li><img src="/asset/images/weixin.png"><span><img src="/asset/images/wx.jpg"></span></li>
          </ul>
        </div>

        <!-- 加载提示start -->
        <div class="loading-div" v-if="!isLoad_1">
          <div class="loader">
            <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
          </div>
        </div>
        <!-- 加载提示end -->

        <!-- 标题 -->
        <div class="username" v-html="logoTitle.content"></div>
      </div>

      <!-- 菜单start -->
      <nav>
        <ul id="starlist">
          <li v-for="(item, index) in sysMenuList" :key="item.id">
            <a v-if="item.href != '/blogSpace'" v-bind:href="item.href" v-text="item.name"></a>
            <a v-if="item.href == '/blogSpace'" href="javascript:void(0)" onclick="window.parent.location.href  = '/blogSpace';" v-text="item.name"></a>
          </li>
        </ul>
      </nav>
      <!-- 菜单end -->
    </header>
    <article>

      <div class="picbox">
        <ul>
          <li data-scroll-reveal="enter bottom over 1s"  v-for="(item, index) in photoAlbumList" :key="item.id">
            <a href="javascript:void(0)" v-on:click="validPassword(item.id, item.isLock)">
              <i v-if="isLoad_2 && item.isLock == 0"><img v-bind:src="'/photo_album_img/' + item.img"></i>
              <i v-if="isLoad_2 && item.isLock == 1"><img src="/asset/images/lock.jpg"></i>
              <i v-if="!isLoad_2"><img src="/asset/images/yuantu.jpg"></i>
              <p class="picinfo" v-text="item.name" v-bind:title="item.name"></p>
            </a>
          </li>
        </ul>
      </div>

      <!-- 加载提示start -->
      <div class="loading-div" v-if="!isLoad_2">
        <div class="loader">
          <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
        </div>
      </div>
      <!-- 加载提示end -->

      <!-- 分页 -->
      <div id="pageContent" class="pagelist" style="position: relative;"></div>

    </article>
    <div class="blank"></div>
    <footer>
      <p v-html="indexFooter.content"></p>
    </footer>
  </div>
</body>
<script>
  //初始化layui模块
  layui.use('layer', function(){
    var layer = layui.layer;
  });

  var myAlbumVue = new Vue({
    el: '#myAlbumVue',
    data: function () {
      return {
        serverUrl: 'http://blog-my.com', //服务器地址（临时开发用）
        isLoad_1: false, //请求1完成标记
        isLoad_2: false, //请求2完成标记
        sysMenuList: [], //导航
        logoTitle: [], //LOGO标题
        indexFooter: [], //页脚
        photoAlbumList: 12, //我的相册
        count: 0, //相册总数
        curr: 1, //页数
        limit: 12, //每页条数
      }
    },
    created: function () {
      const me = this;
      me.$nextTick(function () {
        me.getMyAlbumData();
        me.getPhotoAlbumList(me.curr, me.limit);
      });
    },
    methods: {
      //初始化基本信息
      getMyAlbumData: function(){
        const me = this;
        $.ajax({
          type: 'POST',
          url: '/myAlbum/getMyAlbumData',
          data: {},
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.sysMenuList = data.sysMenuList;
              me.logoTitle = data.logoTitle;
              me.indexFooter = data.indexFooter;
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
            me.isLoad_1 = true;
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //初始化相册信息
      getPhotoAlbumList: function(curr, limit){
        const me = this;
        me.isLoad_2 = false;
        $.ajax({
          type: 'POST',
          url: '/myAlbum/getPhotoAlbumList',
          data: {
            page: curr,
            limit: limit
          },
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.photoAlbumList = data.photoAlbumList;
              me.count = data.count;

              me.initPage(); //初始化分页

              me.isLoad_2 = true;

            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //点击相册，判断是否加锁
      validPassword: function(albumId, isLock){
        const me = this;

        if(isLock == 0){
          location.href = '/myAlbum/photo?albumId=' + albumId;
        }else{
          layui.use('layer', function(){
            var index = layer.open({
              title: '相册密码校验',
              type: 1,
              shade: 0.2,
              maxmin:false,
              shadeClose: false,
              btn: ['确定', '取消'],
              area: ['250px','150px'], //宽高
              content: '<input type="password" id="albumPassword" placeholder="请输入密码" autofocus autocomplete="off" class="layui-input">',
              yes: function(index, layero){
                var albumPassword = $("#albumPassword").val();
                if(albumPassword == '' || albumPassword == null || albumPassword == undefined){
                  layer.msg("请输入密码", {icon:2});
                  return;
                }
                var loadIndex = layer.load(2); //加载提示
                $.ajax({
                  type: 'POST',
                  url: '/myAlbum/validPhotoPassword',
                  data: {
                    albumId: albumId,
                    albumPassword: albumPassword
                  },
                  dataType: 'JSON',
                  success: function(data){
                    layer.close(loadIndex); //关闭加载提示
                    layer.close(index); //关闭加载提示
                    if(data.state == "200"){
                      layer.msg(data.message, {icon:1});
                      //验证通过跳转页面
                      setTimeout(function(){location.href = '/myAlbum/photo?albumId=' + albumId;}, 1000)
                    }else{
                      layer.msg(data.message, {icon:2});
                    }
                  },
                  error: function(error){
                    layer.close(loadIndex); //关闭加载提示
                    layer.msg(error, {icon:2});
                  }
                })
              },
              btn2: function(index, layero){
                layer.close(index);
              }
            });
          });
        }
      },

      //分页
      initPage: function(){
        const me = this;
        layui.use('laypage', function(){
          var laypage = layui.laypage;
          //执行一个laypage实例
          laypage.render({
            elem: 'pageContent' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: me.count //数据总数，从服务端得到
            ,limit: me.limit //每页条数
            ,curr: me.curr //页数
            // ,limits: [10, 20, 30, 40, 50] //每页条数的选择项
            ,layout: ['prev', 'page', 'next', 'count'] //自定义排版
            ,jump: function(obj, first){ //obj包含了当前分页的所有参数
              //首次不执行
              if(!first){
                me.curr = obj.curr;
                me.getPhotoAlbumList(obj.curr, obj.limit);
              }
            }
          });
        });
      }
    }
  });
</script>
</html>
